<template>
	<div id="tmp1">
		<!-- 轮播图 -->
		<div class="slider">
			<slider :imgs="imgs"></slider>
		</div>

		<!-- 商品购买区域 -->
		<div id="buy">
			<h4>{{params.title}}</h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价$<del>{{params.market_price}}</del>
					销售价$<span>{{params.sell_price}}</span>
				</li>
				<li>
					购买数量：<inputNumber @dataobj='getcount'></inputNumber>
				</li>
				<li>
					<mt-button type='primary' size="small">立即购买</mt-button>
					<mt-button type='danger' size="small" @click='toshopcar'>加入购物车</mt-button>
				</li>
			</ul>
		</div>
		<!-- 商品参数 -->
		<div id="params">
			<h4>商品参数</h4>
			<p class="line"></p>
			<ul>
				<li>商品货号:{{params.goods_no}}</li>
				<li>库存情况:{{params.stock_quantity}}</li>
				<li>上架时间:{{params.add_time}}</li>
			</ul>
		</div>
		<!-- 图文详情和商品评论按钮 -->
		<div id="otherbtn">

			<router-link v-bind="{to:'/goods/goodsesc/'+id}">
				<mt-button class="twxq" type='primary' size="large">图文详情</mt-button>
			</router-link>
			<router-link v-bind="{to:'/goods/goodscom/'+id}">
			<mt-button class="sppl" type='danger' size="large">商品评论</mt-button>
			</router-link>
		</div>
	</div>
</template>

<script>
import { Toast } from 'mint-ui';
import slider from '../slider.vue'
import inputNumber from '../subcom/inputNumber.vue'
import common from '../../kits/common.js'
import datafmt from '../../main.js'
import {vm,COUNTSTR} from '../../kits/vm.js'
	export default{
		components:{
			slider,
			inputNumber
		},
		data(){
			return{
				inputNumberCount:1,
				id:0,
				imgs:[],
				params:{}
			}
		},
		created(){
			this.id = this.$route.params.id;
			this.getimgs();
			this.getproparams();
		},
		methods:{
			toshopcar(){
				vm.$emit(COUNTSTR,this.inputNumberCount);
			},
			getcount(count){
				this.inputNumberCount = count;
			},
			getimgs(){
				var url = common.apidomain+'/api/getthumimages/' + this.id;
				console.log(url);


				this.$http.get(url).then(function(res){
					this.imgs = res.body.message;
				});

			},
			getproparams(){
				var url = common.apidomain+'/api/goods/getinfo/' + this.id; 
				console.log(url);
				this.$http.get(url).then(function(res){
					this.params = res.body.message[0];
				})
			}
		}
	}
</script>

<style scoped>
	.slider{
		border:1px solid #666;
		border-radius: 5px;
		width:94%;
		margin:0 3%;
	}
	#buy,#params,#otherbtn{
		border:1px solid #999;
		width:94%;
		margin:0 3%;
		margin-top:10px;
	}

	h4{
		text-align: left;
		padding-left:3%;
		color:#0094ff;
	}
	.line{
		width:94%;
		margin:0 3%;
		height: 0;
		border-bottom:1px solid #666;
	}
	.price{
		text-align: left;
	}
	.price del{
		margin-right:20px;
	}
	.price span:nth-child(2){
		color:red;
	}
	ul{
		text-align: left;
		padding-left:3%;
	}
	ul li{
		list-style: none;
		padding:5px;
	}

	#otherbtn .twxq,#otherbtn .sppl{
		width:94%;
		margin:5px 3%;
	}
</style>